<template>
  <div class="contentscroll">
    <div v-if="images.length > 0" class="device-4c-content">
      <div
        v-for="(item, index) in images"
        :key="index"
        :class="{active:activenum===index}"
        class="device-4c-item"
        @click="change(index)">
        <span class="num">{{ getnum(item) }}</span>
        <img v-lazy="item.filePath" :src="item.filePath">
        <!-- <p class="title">{{ item.picName }}</p> -->
      </div>
    </div>
    <div v-else-if="list.length > 0" class="no-img">暂无数据</div>
  </div>
</template>

<script>
export default {
  name: 'Device4cContent',
  props: {
    list: Array,
    revese: {
      type: [Number, String],
      default: 1
    }
  },
  data() {
    return {
      activenum: 0,
      images: []
    }
  },
  watch: {
    list(val) {
      const arr = []
      this.activenum = 0
      this.images = val
    }
    // revese(val) {
    //   const arr = []
    //   this.activenum = 0
    //   this.list.forEach(item => {
    //     if (item.cameraSide === this.revese) {
    //       arr.push(item)
    //     } else if (this.revese === 'all') {
    //       arr.push(item)
    //     }
    //   })
    //   this.images = arr
    // }
  },
  methods: {
    getnum(item) {
      var ss = item.fileName.split('_')
      var val = ss[ss.length - 1]
      return val.substring(0, val.length - 4)
    },
    change(num) {
      this.activenum = num
      this.$emit('changeimg', this.images[num])
    },
    add() {
      if (this.activenum < this.images.length - 1) {
        this.activenum++
        this.change(this.activenum)
      }
    },
    add4() {
      if (this.activenum < this.images.length - 4) {
        this.activenum = this.activenum + 4
        this.change(this.activenum)
      }
    },
    reduce() {
      if (this.activenum > 0) {
        this.activenum--
        this.change(this.activenum)
      }
    },
    reduce4() {
      if (this.activenum > 3) {
        this.activenum = this.activenum - 4
        this.change(this.activenum)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .contentscroll {
    height: 100%;
    overflow-y: scroll;
    .device-4c-content {
      &.revese {
        img {
          transform: rotateY(180deg);
        }
      }
      .device-4c-item {
        position: relative;
        float: left;
        width: 88px;
        height: 64px;
        margin-left: 5px;
        margin-bottom: 5px;
        text-align: center;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        .num{
          position: absolute;
          font-size: 14px;
          top: 0;
          left: 0;
        }
        img {
          display: block;
          width: 88px;
          height: 64px;
        }
        .title {
          height: 40px;
          padding: 2px;
          overflow: hidden;
          font-size: 12px;
          line-height: 16px;
          color: #fff;
          word-break: break-all;
          white-space: normal;
          background: #0c182f;
        }
      }
      .active{
        border: 2px solid #409eff;
        img {
          display: block;
          width: 84px;
          height: 60px;
        }
      }
    }

    .no-img {
      line-height: 50px;
      color: #666;
      text-align: center;
    }
  }
</style>
